<template>
   <view class="red"> 
        <view class="cell" v-for="item of list" :key="item.id">
            <view class="title">
                <view class="main-title">{{item.title}}</view>
                <view class="sub-title">{{item.alt}}</view>
            </view>
            <view class="nav_cell">
                <navigator  :url="`/pages/hot/hot?type=${item.type}`"   v-for="img of item.pictures" :key="img">
                    <image class="img" :src="img"/>
                </navigator>
            </view>
        </view>
   </view>
</template>

<script setup lang="ts">
import { ref,defineProps } from 'vue';
import type { bannerItem, recommendItem, classfyItem } from '@/types/home';

let props = defineProps({
    list: {
        type: Array<recommendItem>,
        default: []
    }
})
</script>

<style scoped lang='scss'>
    .red {
        display: flex;
        width: 100%;
        flex-wrap: wrap;
        justify-content: space-around;
        padding: 10rpx 5rpx; 
        margin-top: 30rpx;
    }
    .cell {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 50%;
        padding: 10rpx 0;
        .title {
            display: flex;
            align-items: center;
            width: 100%;
            .main-title {
                font-size: 28rpx;
                margin-left: 32rpx;
            }
            .sub-title {
                font-size: 24rpx;
                color: #aaaaaa;
                margin-left: 6rpx;
            }
        }
        .nav_cell {
            display: flex;
            margin-top: 10rpx;
            .img {
                width: 160rpx;
                height: 160rpx;
                margin: 8rpx;
            }
        }
    }

    .cell:nth-child(1){
        border-bottom: 2rpx solid #e1d7d7;
        border-right: 2rpx solid #e1d7d7;
    }
    .cell:nth-child(2){
        border-bottom: 2rpx solid #e1d7d7;
    }
    .cell:nth-child(3){
        border-right: 2rpx solid #e1d7d7;
    }
    
</style>
